// 导入内置模块
const path = require("path")

// 导入html-webpack-plugin插件:作用是自动复制HTML到出口处
const HtmlWebpackPlugin = require("html-webpack-plugin")

// 本插件会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

// 配置webpack必须遵守ComonJS规范
module.exports = {
    mode: "development",
    // 入口 可以用相对路径
    entry: "./src/main.js",
    // 出口
    output: {
        path: path.join(__dirname, "dist"),
        filename: "bundle.js"
    },
    // 配置plugin插件
    plugins: [
        new HtmlWebpackPlugin({
            template: "./src/public/index.html"
        }),
        new MiniCssExtractPlugin()
    ],
    module: {
        rules: [{
            test: /\.css$/i,
            use: ["style-loader", "css-loader"]
        }, {
            test: /\.less$/,
            use: ["style-loader", "css-loader", "less-loader"]
        }, {
            test: /\.(png|jpg|jpeg|gif)$/i,
            type: "asset"
        }, {
            test: /\.(eot|svg|ttf|woff|woff2)$/,
            type: "asset/resource",
            generator: {
                filename: "font/[name].[hash:6][ext]"
            }
        }, {
            test: /\.css$/i,
            use: [MiniCssExtractPlugin.loader, "css-loader"],
        }, ]
    },
    devServer: {
        port: 3006, //端口号
        open: true //自动唤起服务器
    }
}